import { WhiteSpace, WingBlank, Steps, Toast } from 'antd-mobile';
import React, { useEffect, useState } from 'react';
import DocumentTitle from 'react-document-title'


import { refundDetail } from '@api/order'
import { getTime } from '../../utils';



const Step = Steps.Step;

const RefundSucess = props => {
  return (
    <p style={{ marginLeft: '.41rem', marginBottom: '.4rem' }}> 退款已成功受理，{props?.refundPrice}元将退回原支付账号 </p>
  )
}

const el = <p style={{ marginLeft: '.41rem', marginBottom: '.4rem' }}> 退款已成功受理，2600.00元将退回原支付账号 </p>

const StartRefund = props => (
  <div style={{ marginLeft: '.4rem' }}>  <p>退款原因：{props?.refundReason}</p> <p>退款金额：￥{props?.refundPrice}</p> </div>
)

const ek = <div style={{ marginLeft: '.4rem' }}>  <p>退款原因：质量问题</p> <p>退款金额：￥26.00</p> </div>


const item = (time, el) => (
  <div style={{
    height: 'auto'
  }}>
    <p style={{ margin: '.41rem 0' }}>{time && getTime(time)}</p>

    {el}

    <div className="line"
      style={{
        height: '1px',
        background: 'rgba(0,0,0, .3)',
        marginTop: '.6rem'
      }}
    ></div>
  </div>
)

const title = (text, status) => (
  <p
    style={{
      fontSize: '.32rem',
      fontWeight: '800'
    }}
  >
    <span
      style={status === 1 ? { color: '#FF752D' } : { color: '#474747' }}
    >
      {text}
    </span>
  </p>
)

const icon = (url) => (
  <div className="" style={{ width: '.53rem', height: '.53' }}>
    <img width="100%" height="100%" src={url} alt="" />
  </div>
)


const NoPso = (props) => {
  const { TuiKuan } = props

  const refundsucess = <RefundSucess refundPrice={TuiKuan?.refundPrice} />;
  const startrefund = <StartRefund refundPrice={TuiKuan?.refundPrice} refundReason={TuiKuan?.refundReason} />

  return (
    <>
      <Steps
        current={1}
        size='small'

      >
        {
          (TuiKuan.refund === '2' && TuiKuan.PSO === '0' && TuiKuan.SRO !== '0') && <Step title={title('退款成功', 1)} icon={icon('https://res.lexiangpingou.cn/images/826/2020/09/u2151MjqJj9sB7721qmU9s9s7UuJm3.png')}
            description={item(TuiKuan.SROTIME, refundsucess)}
          />
        }


        {
          (TuiKuan.refund === '2' && TuiKuan.PSO === '0') && <Step title={title('平台退款处理中', 0)} icon=''
            description={item(TuiKuan.platConfirmRefundTime)}
          />
        }

        {
          (TuiKuan.refund === '2' && TuiKuan.PSO === '0') && <Step title={title('平台审核成功', 0)} icon=""
            description={item( TuiKuan.platConfirmRefundTime )}
          />
        }

        {
           // 状态将废弃
          (TuiKuan.refund === '2' && TuiKuan.PSO !== '0') && <Step title={title('平台审核成功,待供应商处理', 0)} icon=""
            description={item( )}
          />
        }

        {
          (TuiKuan.refund !== '0') && <Step title={title('买家申请退款，等待平台审核', 0)} icon={icon('https://res.lexiangpingou.cn/images/826/2020/10/Axqqq44X484xK8X4qWqYU4814u4QYq.png')}
            description={item(TuiKuan.STARTTIME, startrefund)}
          />
        }
      </Steps>
    </>
  )

}

const Pso = (props) => {
  const { TuiKuan } = props

  const refundsucess = <RefundSucess refundPrice={TuiKuan?.refundPrice} />;
  const startrefund = <StartRefund refundPrice={TuiKuan?.refundPrice} refundReason={TuiKuan?.refundReason} />

  return (
    <>
      <Steps
        current={1}
        size='small'

      >


        {
          (TuiKuan.refund === '2' && TuiKuan.SURO === 2 && TuiKuan.SRO !== '0') && <Step title={title('退款成功', 1)} icon={icon('https://res.lexiangpingou.cn/images/826/2020/09/u2151MjqJj9sB7721qmU9s9s7UuJm3.png')}
            description={item(TuiKuan.SUROTIME, refundsucess)}
          />
        }

        {
          (TuiKuan.refund === '2' && TuiKuan.SURO === 2) && <Step title={title(' 平台退款处理中  ', 0)} icon=""
            description={item()}
          />
        }

        {
           // 状态将废弃
          (TuiKuan.refund === '2' && TuiKuan.SURO === 1) && <Step title={title(' 供应商已退款至平台  ', 0)} icon=""
            description={item(  )}
          />
        }

        {
          // 状态将废弃
          (TuiKuan.refund === '2' && TuiKuan.SURO === 0) && <Step title={title(' 供应商已同意退款，退款处理中 ', 0)} icon=""
            description={item(  )} 
          />
        }


        {
           // 状态将废弃
          (TuiKuan.refund === '2' && TuiKuan.SURO === -1) && <Step title={title('平台审核成功,待供应商处理', 0)} icon=""
            description={item(  )}
          />
        }

        {
          (TuiKuan.refund !== '0') && <Step title={title('买家申请退款，等待平台审核', 0)} icon={icon('https://res.lexiangpingou.cn/images/826/2020/10/Axqqq44X484xK8X4qWqYU4814u4QYq.png')}
            description={item(TuiKuan.STARTTIME, startrefund)}
          />
        }


      </Steps>
    </>
  )
}


const Refund = (props) => {


  const [TuiKuan, setTuiKuan] = useState({})

  const { orderno } = props.match.params

  useEffect(() => {

    refundDetail(orderno).then(res => {
      if (res.status === 200) {
        setTuiKuan(res.data)
      } else {
        Toast.offline('未知错误', 1)
      }
    })

    return () => {
      // cleanup
    }
  }, [])

  return (
    <>
      <DocumentTitle title={props.route.title} />
      <div
        style={{
          background: '#ffffff',
          height: '100vh'
        }}
      >
        <WingBlank>
          <WhiteSpace />
          <WhiteSpace />


          {
            TuiKuan.PSO && TuiKuan.PSO !== '0' ? <Pso TuiKuan={TuiKuan}  /> : <NoPso TuiKuan={TuiKuan} />
          }


          <div className="bottom flex-row global-bottom-fixed"
            style={{
              bottom: '0',
              height: '1.24rem',
              width: 'calc( 100% - 30px )'
            }}
          >
            <img src="https://res.lexiangpingou.cn/images/826/2020/10/E42q25Vw174E464154444bZ6ZZb144.png" alt="" />
            <p>如有问题请联系官方客服人员，联系电话400-626-1079</p>
          </div>
        </WingBlank>
      </div>
    </>
  )
}

export default Refund